import React from 'react';
import {
    Form, Input, Button, message, Space, Tooltip, Row, Col, Checkbox, Radio
} from 'antd';
import { connect } from 'umi';
import IconFont from '@/components/Iconfont';
import ZoneSelect from '@/components/ZoneComponent';

const control = "Members";
class UnionpayOption extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            optionProvince: [],
            optionCity: [],
            optionDist: [],
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        const { record } = this.props;
        if (record) {
            this.getData(record.id);            
        }
        
    }
    onFinish = (values: any) => {
        this.setState({ loading: true });
        var act = "Abp/update";
        if (values.model.id == 0 || !values.model.id) {
            act = "Abp/create";
        }
        this.props.dispatch({
            type: act,
            payload: values.model,
            control,
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');                
                this.props.fetchDatas();
            }
            else {
                message.error('保存错误，请联系管理员');
            }
            this.setState({ loading: false });
        });
    }
    getData = (id: number) => {
        const { dispatch } = this.props;
        this.setState({ loading: true });
        if (id) {
            dispatch({
                type: 'Abp/get',
                payload: { id },
                control,
            }).then(() => {
                var result = this.props.response.result;
                this.setState({ record: result,loading: false });
                this.formRef.current.setFieldsValue({ model: result });
            });
        }
    }
    onClose = () => {
        this.props.closeDraw();
    };
    render() {
        return (
            <Form
                layout='vertical'
                ref={this.formRef} onFinish={this.onFinish} >
                <Row gutter={[16, 16]}>
                    <Col span={12}>
                        <Form.Item style={{display:'none'}} name={['model', 'id']}>
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label={<span>会员姓名 <Tooltip title="已被批准加入银联互联网系统的商户代码 固定15位长，仅支持数字和字母"><IconFont type="icon-wenhao" /></Tooltip></span>}
                            name={['model', 'name']}
                            rules={[{ required: true, message: "会员姓名必填" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="用户名" name={['model', 'userName']}
                            rules={[{ required: true, message: "用户名必填" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="密码" name={['model', 'password']}>
                            <Input.Password />
                        </Form.Item>
                        <Form.Item label="联系地址" name={['model', 'address']}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="卡号" name={['model', 'cardNo']}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="电话" name={['model', 'mobile']}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="身份证号" name={['model', 'idNum']}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="性别" name={['model', 'sex']}>
                            <Radio.Group>
                                <Radio.Button value="男">男</Radio.Button>
                                <Radio.Button value="女">女</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        
                        <Form.Item label="其它属性"
                            name={['model', 'inActive']}
                            valuePropName="checked">
                            <Checkbox>无效</Checkbox>
                        </Form.Item>
                    </Col>
                </Row>
                <ZoneSelect layout="Zone" width={100} label="国家/地区" name="model" />
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit" loading={this.state.loading}>保存</Button>
                        <Button onClick={this.onClose}>取消</Button>
                    </Space>
                </Form.Item>
            </Form>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
}))(UnionpayOption);